<template>
  <a_page>
    <q-toolbar class="min-h-40px flex-center q-gutter-x-sm">
      <a-q-input outlined dense v-model.number="req单项.流量" label="流量" placeholder="流量……" />
      <a-q-input outlined dense v-model.number="req单项.扬程" label="扬程" placeholder="扬程……" />
      <q-btn dense text-color="primary" label="选型" icon="search" @click="选型()" />
    </q-toolbar>
    <q-scroll-area class="full-width 全高-工具栏">
      <div class="row q-col-gutter-md">
        <q-card class="col-4 q-pa-md" v-for="(单项组, key) in 单项集" :key="key">
          <q-card-section v-for="单项 in 单项组" :key="单项.id" class="">
            <div>
              {{ key }}:
              {{ 单项.流量 }}
            </div>
          </q-card-section>
        </q-card>
      </div>
    </q-scroll-area>
  </a_page>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import *  as util from '@/utils'
import a列表字段 from '@/components/a列表字段.vue';
import AQInput from '@/amtf/components/a-q-input.vue';
const req单项 = reactive({
  流量: 0
})
import useApi from "@/api/增查api"
const api = useApi()

// const 单项组 = reactive<单项组>([])
const 单项集 = reactive<单项>({})

async function 选型() {
  const res = await api.查(req单项)
  console.log(`查多个 res 👉`, res)
  if (res.code === 0) {
    // util.数组重予(单项组, res.data.list)
    util.对象重予(单项集, res.data)
  }
}
</script>
